<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body after-navber">
				<view class="info">
            <view class="info-title flex-row">
                <view class="info-block">
                    <view class="info-up white">{{data.custom.menus.money.name}}</view>
                    <view class="info-bottom white">
                        <view class="big bold">{{data.total_price}}</view>
                        <view class="bottom">元</view>
                    </view>
                </view>
                <view class="info-block">
                    <navigator openType="navigate" url="/pages/cash-detail/cash-detail">
                        <view class="info-btn white big-13">{{data.custom.menus.cash.name}}</view>
                    </navigator>
                </view>
            </view>
            <view class="info-content black">
                <view class="info-label flex-y-center big-13">
                    <view class="info-left text-more">{{data.custom.words.can_be_presented.name}}</view>
                    <view class="info-right">{{data.price}}元</view>
                </view>
                <view class=" info-margin">
                    <view class="info-label big-13">
                        <view class=" border-bottom flex-y-center">
                            <view class="info-left text-more">{{data.custom.words.already_presented.name}}</view>
                            <view class="info-right">{{data.cash_price}}元</view>
                        </view>
                    </view>
                    <view class="info-label flex-y-center big-13">
                        <view class="info-left text-more">{{data.custom.words.pending_money.name}}</view>
                        <view class="info-right">{{data.un_pay}}元</view>
                    </view>
                </view>
                <view @tap="tapName" class="info-label flex-y-center  big-13" hover="true" hoverClass="button-hover">
                    <view class="info-left text-more">{{data.custom.words.user_instructions.name}}</view>
                    <view class="info-user info-right">
                        <image :src="data.__wxapp_img.share.down.url" style="width:26upx;height:16upx;" v-if="data.block"></image>
                        <image :src="data.__wxapp_img.share.right.url" style="width:16upx;height:26upx;" v-else></image>
                    </view>
                </view>
                <view class="info-label flex-y-center big-13" style="height:auto;padding:24upx 24upx;" v-if="data.block">
                    <text class="" style="font-size:10pt;line-height:1.5">{{data.share_setting.content}}</text>
                </view>
            </view>
            <view class="info-footer">
                <navigator openType="navigate" url="/pages/cash/cash">
                    <view class="info-btn white text-more">{{data.custom.words.apply_cash.name}}</view>
                </navigator>
            </view>
        </view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
				data: {
        block: !1,
        active: "",
        total_price: 0,
        price: 0,
        cash_price: 0,
        un_pay: 0
    },
			};
		},
		onLoad: function(t) {myVue = this;
        myVue.getApp.page.onLoad(this, t);
    },
    onReady: function() {
        myVue.getApp.page.onReady(this);
    },
    onShow: function() {
        myVue.getApp.page.onShow(this);
        var t = this, e = myVue.getApp.core.getStorageSync(myVue.getApp.const.SHARE_SETTING), a = myVue.getApp.core.getStorageSync(myVue.getApp.const.CUSTOM);
        t.setData({
            share_setting: e,
            custom: a
        }), myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.share.get_price,
            success: function(e) {
                0 == e.code && t.setData({
                    total_price: e.data.price.total_price,
                    price: e.data.price.price,
                    cash_price: e.data.price.cash_price,
                    un_pay: e.data.price.un_pay
                });
            },
            complete: function() {
                t.getApp.core.hideLoading();
            }
        });
    },
		onHide: function() {
        myVue.getApp.page.onHide(this);
    },
    onUnload: function() {
        myVue.getApp.page.onUnload(this);
    },
		methods: {
			tapName: function(t) {
        var e = this, a = "";
        e.data.block || (a = "active"), e.setData({
            block: !e.data.block,
            active: a
        });
    },
		},
	}
</script>

<style scoped>
.info {
    width: 100%;
}

.white {
    color: #fff;
}

.black {
    color: #353535;
}

.big {
    font-size: 18pt;
    display: inline-block;
}

.big-13 {
    font-size: 13pt;
}

.big-14 {
    font-size: 14pt;
}

.bottom {
    font-size: 9pt;
    margin-left: 4upx;
    display: inline-block;
}

.info-margin {
    margin: 20upx 0;
}

.border-bottom {
    border-bottom: 1upx #ccc solid;
    height: 100%;
}

.margin-top {
    margin-top: 20upx;
}

.info .info-title {
    padding: 24upx 24upx;
    background-color: #ff4544;
    width: 100%;
}

.info .info-title .info-block {
    width: 50%;
}

.info .info-title .info-block .info-up {
    margin-top: 15upx;
    padding-bottom: 10upx;
}

.info .info-bottom {
    display: inline-table;
    width: 100%;
}

.info .info-block .info-btn {
    border: 1upx #fff solid;
    border-radius: 10upx;
    text-align: center;
    float: right;
    margin-top: 45upx;
    padding: 6upx;
}

.info .info-content {
    width: 100%;
}

.info .info-content .info-label {
    width: 100%;
    height: 96upx;
    padding: 0 24upx;
    background-color: #fff;
}

.info-content .info-label .info-left {
    width: 50%;
}

.info-content .info-label .info-right {
    width: 50%;
    text-align: right;
    color: #666666;
}

.info-footer {
    width: 100%;
    padding: 40upx 24upx 0 24upx;
}

.info-footer .info-btn {
    width: 100%;
    background-color: #ff4544;
    height: 100upx;
    border-radius: 10upx;
    line-height: 100upx;
    text-align: center;
}
</style>
